<template>
  <div>
    <div
      id="mapid"
      style="height: 800px; width: 800px; padding: 5px"
    ></div>
    <router-link to='/hangzhou'>杭州</router-link>
  </div>
</template>

<script>
import sichuan from "../lib/sichuan.json"; // 引入杭州市地图数据(引入方式重点，本人用其他方式报错)
export default {
  data() {
    return {
      allData: [
        {
          startLat: "45.165732",
          startLng: "126.139283",
          tollStationName: "总1",
          totalType: "12345",
          list: [
            {
              fromToTollStationName: "总1-1",
              startLat: "45.508675",
              startLng: "126.513409",
              trafficFlow: 123,
            },
            {
              fromToTollStationName: "总1-2",
              startLat: "45.386216",
              startLng: "126.410610",
              trafficFlow: 12345,
            },
            {
              freight: 93353350,
              fromToTollStationName: "总1-3)",
              startLat: "46.165732",
              startLng: "126.139283",
              trafficFlow: 6933570,
            },
          ],
        },
        {
          startLat: "47.993455",
          startLng: "123.486567",
          tollStationName: "总2",
          totalType: "12345",
          list: [
            {
              fromToTollStationName: "总2-1",
              startLat: "45.508675",
              startLng: "126.513409",
              trafficFlow: 1234,
            },
            {
              fromToTollStationName: "总2-2",
              startLat: "47.293455",
              startLng: "123.486567",
              trafficFlow: 11111,
            },
            {
              fromToTollStationName: "总2-3",
              startLat: "45.177807",
              startLng: "126.174966",
              trafficFlow: 4321,
            },
          ],
        },
        {
          startLat: "47.342922",
          startLng: "124.086943",
          tollStationName: "总3",
          totalType: "12345",
          list: [
            {
              fromToTollStationName: "总3-1",
              startLat: "47.442922",
              startLng: "124.086943",
              trafficFlow: 2321,
            },
            {
              fromToTollStationName: "总3-2",
              startLat: "47.292132",
              startLng: "124.520282",
              trafficFlow: 12345,
            },
            {
              fromToTollStationName: "总3-3",
              startLat: "47.153795",
              startLng: "124.878718",
              trafficFlow: 54321,
            },
          ],
        },
      ],
      mapEcharts :''
    };
  },
  created() {},
  mounted() {
    this.setgreenCarRoute(this.allData,1)
  },
  methods: {
    // 在画图之前，先整理一下数据，调用下面方法
    resetData(data, type) {
      // data代表返回的数据
      // type为1，流入；type为2 流出。
      let result = {
        totalType: "", //总的为流入还是流出
        falseTotalType: "", //totalType为lr，则falseTotalType为lc；反之为lr
        linesData: [],
        effectScatterData: [],
      };
      if (type == 1) {
        result.totalType = "lr";
        result.falseTotalType = "lc";
      } else {
        result.totalType = "lc";
        result.falseTotalType = "lr";
      }
      data.forEach((item, index) => {
        result.effectScatterData.push({
          type: result.totalType,
          i: index + 1,
          traffiFlow: item.tollStationCount,
          name: item.tollStationName,
          value: [item.startLng, item.startLat],
        });
        item.list.forEach((el, i) => {
          if (i < 3) {
            //由于只需要显示前三名的地点，所以取前三个就可以
            if (type == 1) {
              //判断是流入图还是流出图，1为流入
              result.linesData.push({
                fromName: el.fromToTollStationName, //开始地点name
                toName: item.tollStationName, //目的地地点name
                coords: [
                  [el.startLng, el.startLat], //开始地点的坐标
                  [item.startLng, item.startLat], //目的地的坐标
                ],
              });
            } else {
              //流出的话，就调换开始和结束的位置即可
              result.linesData.push({
                fromName: item.tollStationName,
                toName: el.fromToTollStationName,
                coords: [
                  [item.startLng, item.startLat],
                  [el.startLng, el.startLat],
                ],
              });
            }
            result.effectScatterData.push({
              //这里就是把所有的要标注的位置给集合一下，不管是流入还是流出
              type: result.falseTotalType,
              i: i + 1,
              traffiFlow: el.trafficFlow,
              name: el.fromToTollStationName,
              value: [el.startLng, el.startLat],
            });
          }
        });
      });
      return result;
    },
    // 开始画图：
    setgreenCarRoute(data, contype) {
      let mapdata = this.resetData(data, contype); //画图之前调用该方法，整理后台返回数据，获得最终所需数据
      if (this.mapEcharts != null && this.mapEcharts != "" && this.mapEcharts != undefined) {
        this.mapEcharts.dispose(); //销毁
      }
      this.mapEcharts = this.echarts.init(document.getElementById("mapid"));
      this.echarts.registerMap("sichuan", sichuan);
      let option = {
        tooltip: {
          formatter: function (params) {
            return params.data.name + params.data.traffiFlow; //这里是鼠标移入每个标志点所显示的文字内容
          },
        },
        geo: {
          map: "sichuan",
          zoom: 1,
          // aspectScale: 0.75, //地图长度比
          roam: false, //  鼠标缩放和 平移漫游
          itemStyle: {
            normal: {
              areaColor: "#6ea5f7",
              label: {
                show: false,
              },
            },
            emphasis: {
              show: true,
              areaColor: "#1a7bbf",
              label: {
                show: false,
                textStyle: {
                  color: "red",
                },
              },
            },
          },
        },
        series: [
          {
            name: "",
            type: "lines", //在 地理坐标系上画线图
            zlevel: 2,
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: "arrow",
              symbolSize: 10,
            },
            lineStyle: {
              normal: {
                color: "#feb43b",
                width: 1,
                opacity: 0.6,
                curveness: 0.2,
              },
            },
            data: mapdata.linesData,
          },
          {
            name: "",
            type: "effectScatter", //在地理坐标系画出所有的标志点
            coordinateSystem: "geo",
            zlevel: 3,
            rippleEffect: {
              brushType: "stoke",
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: function (params) {
                  //由于项目需要，只需要显示所有总的数据的标志点文字，也就是图上的圈1,2,3
                  if (params.data.type === mapdata.totalType) {
                    return params.data.i;
                  } else {
                    return "";
                  }
                },
              },
            },
            symbol: "circle",
            symbolSize: function (value, params) {
              if (params.data.type === mapdata.totalType) {
                //标志点的大小
                return 20;
              } else {
                return 10;
              }
            },
            itemStyle: {
              normal: {
                color: "#feb43b",
                borderColor: "white",
              },
            },
            data: mapdata.effectScatterData,
          },
        ],
      };
      if (option && typeof option === "object") {
        this.mapEcharts.setOption(option, true);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#mapid{
  transform:rotateX(40deg)
}
</style>